<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket test</title>
    <style>
        #console {font-family: Consolas;font-size:13px;background: #000;color:limegreen;width:800px; height:600px;overflow: auto;}
    </style>
</head>
<body>

    <div id="console"></div>

    msg:<input type="text" id="msg"/>
    <button id="send" type="button" onclick="send()">send</button>

    <script>

        let webSocketUrl = "ws://127.0.0.1:8082/simple/1";
        var websocket = new WebSocket(webSocketUrl);

        connect();

        function connect() {
            websocket.onopen = function(e) {
                //给服务器端发消息
                console.log("open...")
            };
            websocket.onmessage = function(event) {
                // 接收服务端的消息
                let data = event.data;
                append(data);
            };
            websocket.onclose = function (ev) {
                append("【connection closed】 code=:"+ev.code+";  reason="+ev.reason+";   wasclean="+ev.wasClean);
            }
        }

        function append(messge) {
            var console = document.getElementById("console");
            console.innerHTML += messge +" <br/>----------------------------------<br/><br/>";
            console.scrollTop = console.scrollHeight;
        }

        function send() {
            websocket.send(document.getElementById("msg").value);
        }

    </script>
</body>
</html>